<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    destroy-on-close
    custom-class="drawerClass"
  >
    <el-form ref="form" :model="entity" label-width="100px" :rules="rules">
      <el-form-item label="所属公司">
        <CompanySearchSelect
          v-model="entity.CompanyId"
          @select="CompanySelect"
        />
      </el-form-item>
      <el-form-item label="客户" prop="cCusName">
        <CustomerSearchSelect
          v-model="entity.cCusName"
          @select="handleSelect"
          :disabled="!entity.CompanyId"
          :CompanyId="entity.CompanyId"
        />
      </el-form-item>
      <el-form-item label="签收人" prop="cName">
        <el-input v-model.trim="entity.cName"></el-input>
      </el-form-item>
      <el-form-item label="签收电话" prop="cPhone">
        <el-input v-model.trim="entity.cPhone"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="IdCard">
        <el-input v-model.trim="entity.IdCard"></el-input>
      </el-form-item>
      <el-form-item label="省/直辖市" prop="cProvince">
        <el-select
          style="width: 100%"
          v-model="entity.cProvince"
          placeholder="请选择省/直辖市"
          @change="changeProvince"
        >
          <el-option
            v-for="item in ProvinceList"
            :key="item.Id"
            :value="item.Id"
            :label="item.Name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="cCity">
        <el-select
          style="width: 100%"
          v-model="entity.cCity"
          placeholder="请选择市"
          @change="changeCity"
        >
          <el-option
            v-for="item in CityList"
            :key="item.Id"
            :value="item.Id"
            :label="item.Name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区" prop="cCounty">
        <el-select
          style="width: 100%"
          v-model="entity.cCounty"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in CountyList"
            :key="item.Id"
            :value="item.Id"
            :label="item.Name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="Address">
        <el-input v-model="entity.Address"></el-input>
      </el-form-item>
    </el-form>
    <!--    只做展示-->
    <el-divider style="margin: 20px 0">认证信息</el-divider>
    <div style="padding: 0 50px; color: #333333">
      <div style="padding-bottom: 8px; margin-left: 20px">
        <span
          style="
            background-color: #ecf5ff;
            color: #409eff;
            padding: 1px 10px;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: 1px solid #67a7ea;
          "
        >
          认证时间
        </span>
        <span style="font-size；20px;">{{
          entity.VeriDate
            ? this.timeFormat(entity.VeriDate, "YYYY-MM-DD HH:mm")
            : "未认证"
        }}</span>
      </div>
      <div style="padding-bottom: 8px; margin-left: 20px">
        <span
          style="
            background-color: #ecf5ff;
            color: #409eff;
            padding: 1px 10px;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: 1px solid #67a7ea;
          "
          >认证方式</span
        >
        <span style="font-size；20px;">
          {{
            entity.VeriType == 0
              ? "二要素"
              : entity.VeriType == 1
              ? "人脸识别"
              : entity.VeriType == 2
              ? "三要素"
              : "未认证"
          }}</span
        >
      </div>

      <div>
        <span
          style="
            background-color: #ecf5ff;
            color: #409eff;
            padding: 1px 10px;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: 1px solid #67a7ea;
          "
          >认证设备IME</span
        >
        <span style="font-size；20px;">
          {{ entity.FromDevice ? entity.FromDevice : "" }}</span
        >
      </div>
    </div>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 99999,
      }"
    >
      <!--      暂时删除  后续根据需求打开-->
      <!--      <span style="float: left; line-height: 3; color: red"-->
      <!--        >注:初始密码为手机号后六位</span-->
      <!--      >-->
      <!--      <el-button type="primary" @click="sendCode" v-if="title == '编辑签收人'"-->
      <!--        >发送</el-button-->
      <!--      >-->
      <el-button @click="drawer = false">取消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="handleSubmit"
        >保存</el-button
      >
    </div>
  </el-drawer>
</template>

<script>
let checkPhone = (rule, value, callback) => {
  let reg = /^1[345789]\d{9}$/;
  if (!reg.test(value)) {
    callback(new Error("请输入正确的手机号"));
  } else {
    callback();
  }
};
let checkIdcard = (rule, value, callback) => {
  let reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
  if (!reg.test(value)) {
    callback(new Error("请输入正确的身份证号"));
  } else {
    callback();
  }
};
import CompanySearchSelect from "@/components/CompanySearchSelect.vue";
import CustomerSearchSelect from "@/components/CustomerSearchSelect.vue";
export default {
  props: {
    parentObj: { type: Object },
  },
  components: {
    CompanySearchSelect,
    CustomerSearchSelect,
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      entity: {},
      rules: {
        cCusName: [
          { required: true, message: "请输入客户名称", trigger: "change" },
        ],
        cName: [
          { required: true, message: "请输入签收人名称", trigger: "blur" },
        ],
        cPhone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        IdCard: [{ required: true, validator: checkIdcard, trigger: "blur" }],
        // Province: [
        //   { required: true, message: "请输入客户名称", trigger: "blur" },
        // ],
        // City: [{ required: true, message: "请选择市", trigger: "blur" }],
        // Area: [{ required: true, message: "请选择区", trigger: "blur" }],
        // Address: [
        //   { required: true, message: "请输入详细地址", trigger: "blur" },
        // ],
      },
      btnLoading: false,
      title: "",
      loading: false,
      timeout: null,
      //   省下拉列表数据
      ProvinceList: [],
      //   市下拉列表数据
      CityList: [],
      //   区下拉列表数据
      CountyList: [],
    };
  },
  methods: {
    // 省份选择改变
    changeProvince(e) {
      this.$set(this.entity, "cCity", "");
      this.$set(this.entity, "cCounty", "");
      this.$forceUpdate();
      console.log("省份选择改变", e, this.entity);
      // 获取市下拉啊列表数据
      this.getCityList(e);
    },
    //市选择改变
    changeCity(e) {
      this.$set(this.entity, "cCounty", "");
      console.log("市选择改变", e, this.entity);
      // 获取区下拉列表数据
      this.getCountyList(e);
    },
    sendCode() {
      if (!this.entity.cPhone) return this.$message.error("请维护客户手机号");
      this.$http
        .post("/BO/CustomerLinkman/GetMessagePwd?Phone=" + this.entity.cPhone)
        .then((res) => {
          if (res.Success) {
            this.$message.success("密码已成功发送至客户手机");
          } else {
            this.$message.error("发送失败!请稍后重试");
          }
        });
    },
    // 公司选择
    CompanySelect(row) {
      console.log(row);
      this.$set(this.entity, "cCusCode", "");
      this.$set(this.entity, "cCusName", "");
    },
    // 获取省份下拉列表数据
    getProvinceList() {
      this.$http
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=0", {})
        .then((resJson) => {
          this.ProvinceList = resJson.Data;
          console.log("获取省份下拉列表数据", this.ProvinceList);
        });
    },
    // 市列表
    getCityList(id) {
      this.$http
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=" + id, {})
        .then((resJson) => {
          this.CityList = resJson.Data;
        });
    },
    // 区列表
    getCountyList(id) {
      this.$http
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=" + id, {})
        .then((resJson) => {
          this.CountyList = resJson.Data;
        });
    },
    init() {
      this.entity = {};
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    openForm(Id, CompanyId) {
      this.init();
      // 获取省份下拉列表数据
      this.getProvinceList();
      if (CompanyId) {
        this.entity.CompanyId = CompanyId;
      }
      this.title = "新增签收人";
      if (Id) {
        this.title = "编辑签收人";
        this.getTheData(Id);
      }
    },

    handleClose(done) {
      done();
    },
    handleSelect(item) {
      this.entity.cCusCode = item.cCusCode;
      this.entity.cCusName = item.cCusName;
      this.entity.cCusId = item.Id;
    },
    getTheData(id) {
      this.$http.post("/BO/CustomerLinkman/GetTheData", { id }).then((res) => {
        if (res.Success) {
          this.entity = res.Data;
          //   处理认证时间  认证方式和认证设备
          this.entity.FromDevice = this.entity.FromDevice
            ? this.entity.FromDevice
            : "";
          if (this.entity.SignType == 0) {
            this.entity["SignTypeName"] = "二要素";
          } else if (this.entity.SignType == 1) {
            this.entity["SignTypeName"] = "人脸识别";
          } else if (this.entity.SignType == 2) {
            this.entity["SignTypeName"] = "三要素";
          } else if (this.entity.SignType == 3) {
            this.entity["SignTypeName"] = "微信";
          } else {
            this.entity["SignTypeName"] = "手机号";
          }
          this.entity.SignTime = this.entity.SignTime
            ? this.entity.SignTime
            : "";
          console.log("详情结果--", this.entity);
        } else {
          this.$message.error(res.Msg);
        }
      });
    },
    handleSubmit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.btnLoading = true;
        this.$http
          .post("/BO/CustomerLinkman/SaveData", this.entity)
          .then((res) => {
            this.btnLoading = false;
            if (res.Success) {
              this.$message.success("操作成功");
              this.parentObj.getDataList();
              this.drawer = false;
            } else {
              this.$message.error(res.Msg);
            }
          });
      });
    },
  },
};
</script>

<style>
.drawerClass {
  padding: 10px;
}
</style>
